<template>
  <el-input
    v-model="inputValue"
    :placeholder="placeholder"
    :type="type"
    :maxlength="maxlength"
    @input="handleInput"
  />
</template>

<script>
export default {
  props: {
    value: {
      // 表单项的值，由父组件传递
      type: [String, Number],
      required: true
    },
    placeholder: {
      // 输入框的占位符
      type: String,
      default: ""
    },
    type: {
      // 输入框的类型
      type: String,
      default: "text"
    },
    maxlength: {
      // 输入框的最大长度
      type: Number,
      default: Infinity
    }
  },
  data() {
    return {
      inputValue: "" // 输入框的值，用于双向绑定
    };
  },
  mounted() {
    this.inputValue = this.value; // 初始化输入框的值
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue; // 监听父组件传递的value的变化，更新输入框的值
    }
  },
  methods: {
    handleInput(value) {
      if (value.length <= this.maxlength) {
        // 根据最大长度进行校验
        this.inputValue = value; // 更新输入框的值
        this.$emit("input", value); // 触发input事件，将新值传递给父组件
      } else {
        this.inputValue = this.value; // 如果超出最大长度，恢复输入框的值为先前的值
      }
    }
  }
};
</script>